import React, { Component } from 'react'
import intl from 'react-intl-universal'
import { Row, Col, Pagination } from 'react-bootstrap'
import ProductItem from './ProductItem/ProductItem'
import { httpGet } from '../../../../services/http'
import { isEqual } from 'lodash'
import Loading from '../../../../components/Loading/Loading'
import './ProductList.less'

class ProductList extends Component {
  state = {
    pageSize: 4,
    pageNum: 1,
    query: '',
    total: null,
    hasMore: false,
    list: [],
    pageCount: null
  }

  getPaginationItem = () => {
    const { pageCount, pageNum } = this.state
    let item
    if (pageCount >= 11) {
      item = [1, 2, 3, -1, pageCount - 2, pageCount - 1, pageCount]
    } else item = Array.from(new Array(pageCount), (x, i) => i + 1) // 这里是创建了一个首元素为1然后递增的数组

    // [...new Array(pageCount).keys()]  这个是创建了首元素为0然后递增的数组
    return item.map((ele, index) => {
      if (ele === -1) return <Pagination.Ellipsis />
      return (
        <Pagination.Item onClick = {() => {this.setState({ pageNum: ele })}}
                         key = {index}
                         active = {ele === pageNum}>
          {ele}
        </Pagination.Item>
      )
    })
  }

  async componentDidMount () {
    const { pageNum, pageSize, query } = this.state
    const [res, err] = await httpGet(
      { url: '/goods/getGoods', params: { pageNum, pageSize, query } })
    res
      ? this.setState({
        ...res.data
      })
      : console.log(err)
  }

  async componentDidUpdate (prevProps, prevState, snapshot) {
    const { pageNum, pageSize, query } = this.state
    const [res, err] = await httpGet(
      { url: '/goods/getGoods', params: { pageNum, pageSize, query } })
    if (res) {
      console.log(res.data, isEqual(prevState, res.data))
      if (isEqual(prevState, res.data)) return false
      this.setState({
        ...res.data
      })
    } else console.log(err)
  }

  render () {
    const { list, pageNum, pageCount } = this.state
    return (
      list.length ? <div id = {'product-list'}>
        <h2>{intl.get('product list')}</h2>
        <ul className = {' clearfix'}>
          {

            list.map(item => {
              return <li className = "float-left col-sm-6 col-md-4 col-lg-3"
                         key = {item._id}>
                <ProductItem goods = {item} />
              </li>
            })
          }
        </ul>
        <Row>
          <Col className = {'clearfix'}>
            <div className = {'float-right'}>
              <Pagination>
                <Pagination.First
                  onClick = {() => {this.setState({ pageNum: 1 })}}
                  disabled = {pageNum === 1} />
                <Pagination.Prev
                  onClick = {() => {this.setState({ pageNum: pageNum - 1 })}}
                  disabled = {pageNum === 1} />
                {this.getPaginationItem()}
                <Pagination.Next
                  onClick = {() => {this.setState({ pageNum: pageNum + 1 })}}
                  disabled = {pageNum === pageCount} />
                <Pagination.Last
                  onClick = {() => {this.setState({ pageNum: pageCount })}}
                  disabled = {pageNum === pageCount} />
              </Pagination>
            </div>

          </Col>
        </Row>
      </div> : <Loading />
    )
  }
}

export default ProductList
